<template>
  <div class="component">
    <div>
      <div v-for="(item,index) in content" :key="index" >
        <div class="item-container">
          <div class="word-container">奖励{{item.selectedTitleName}}</div>
          <div class="data-container" v-if="item.getType===1">{{item.itemPath}}({{item.itemNum}})</div>
          <div class="data-container" v-else>{{item.itemPath}}(-{{item.itemNum}})</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, PropType, watch, ref} from 'vue';
export default defineComponent({
  name: 'Reward',
  props: {
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {}
    },
  },
  setup(props) {
    const content = ref(props.valueFromParent.moduleValue.value );
    watch(()=>props.valueFromParent.moduleValue.value,(newVal)=>{
      content.value = newVal
    },{deep:true})
    return{
      content
    }
  }

});

</script>

<style scoped>
.word-container{
  margin-left: 50px;
  left: 61.17px;
  top: 796px;
  width: 65px;
  height: 25px;
  opacity: 1;
  /** 文本1 */
  font-size: 16.18px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 24.27px;
  color: rgba(145, 145, 145, 1);
  text-align: left;
  vertical-align: top;

}
.data-container{
  left: 163px;
  top: 721px;
  width: auto;
  height: 25px;
  opacity: 1;
  /** 文本1 */
  font-size: 16.18px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 24.27px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;

}
.item-container{
  display: flex;
  gap: 50px;
  margin-top: 9px;

}
.component {
  /* 样式 */
  color: white;
  border: 1px solid #ff8d1a;
  width: 345px;
  min-height: 50px;
  margin-top: 20px;
  background-color: #232323;
  border-radius: 10px;
  overflow:hidden;
}
</style>
